<template>
  <!-- <PublicLoading v-if="loading.mounted" /> -->
  <PublicEmpty v-if="loading.mounted" :ishowImage="true" />
  <div class="dt-main-tabs-content" v-else>
    <!-- <div class="dt-content-left">
      <PcComGroupList @getGroupInfo="getGroupInfo" />
      群聊列表
    </div> -->
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <div class="dt-head-title">
            <div class="dt-detail-title">{{ currGroupName }}</div>
          </div>
          <!-- <div class="dt-head-right" v-if="isShowOrgLink">
            <el-button type="text" @click="goChatOrg">群组织架构</el-button>
          </div> -->
          <div class="dt-head-right" v-if="isGroup && !isDel">
            <!-- 添加和删除群成员 -->
            <i class="dt-icon-Member" v-show="userRole == 1 || userRole == 2" @click="handleCommand"></i>
            <!-- <el-dropdown trigger="click" v-if="userRole==1 || userRole==2" @command="handleCommand">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="addMember">邀请成员</el-dropdown-item>
                <el-dropdown-item command="delMember">删除成员</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
      </div>
      <div class="dt-content-page dt-chat-talk por" v-if="isGroup">
        <!--群聊-->
        <div class="dt-content-page-main por">
          <PmComChatPanel
            @changeRules="changeRules"
            @appendAtuser="appendAtuser"
            @appendPrivate="appendPrivate"
            @shortcutMenuOffEvent="shortcutMenuOff"
            @appendReceipt="appendReceipt"
            @groupInfo="groupInfo"
            ref="ChatPanel"
          />
          <!--聊天面板-->
          <PmComChatInput @anchorPointEvent="goAnchorPoint" ref="ChatInput" /><!--聊天输入框-->
        </div>
        <div class="dt-content-page-aside">
          <PmComChatMember
            @childShortcutMenuEvent="childShortcutMenu"
            @moreGroupInfo="moreGroupInfo"
            @showEmpty="showEmpty"
            @groupMember="groupMember"
            ref="ChatMember"
          />
          <!--群成员-->
        </div>
      </div>
      <div class="dt-content-page" v-if="isNotice">
        <!--通知-->
        <PmComChatNotice />
      </div>
      <div class="dt-content-page" v-if="!groupId">
        <div class="dt-chat-notalk"><img src="/skb/img/logo-gray.png" alt="" /></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: { mounted: false },
      uid: this.$tools.getDecrypt(this.$store.state.uid),
      groupName: '',
      // groupUid: '',
      // groupType: '',
      userRole: 0,
      isDel: 0,
      userCount: '',
      currentGroupId: ''
    }
  },
  watch: {
    $route(to, from) {
      // 当路由变化时，这个函数会被调用
      // to: 新路由对象
      // from: 旧路由对象
      // console.log('路由变化了', to, from)
      // 执行你的逻辑
      this.loading.mounted = false
      this.currentGroupId = this.groupId
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    },
    groupId() {
      return this.query.groupId
    },
    isGroup() {
      return this.query.groupId && this.groupId !== '0'
    },
    isNotice() {
      return this.query.groupId && this.groupId === '0'
    },
    // isShowOrgLink() {
    //   return this.groupId && this.groupType === 1 && this.groupUid + '' === this.uid
    // },
    currGroupName() {
      return this.groupId === '0' ? '系统通知' : this.groupId ? this.groupName + '（' + this.userCount + '）' : ''
    }
  },
  methods: {
    //查看高级群组织架构
    // goChatOrg() {
    //   this.$router.push('/main/#/pc?tab=org&elTab=1&groupId=' + this.groupId)
    // },
    handleCommand(command) {
      this.$refs.ChatMember.isShowInvite()
      // if (command === 'addMember') {
      //   this.$refs.ChatMember.isShowInvite()
      // } else if (command === 'delMember') {
      //   this.$refs.ChatMember.isShowDelet()
      // }
    },
    shortcutMenuOff() {
      this.$refs.ChatMember.shortcutMenuOff()
    },
    goAnchorPoint(item) {
      this.$refs.ChatPanel.goBack(item, 'undefined', '3')
    },
    childShortcutMenu(item) {
      // item.type 1、2、3(@/悄悄话/回执)  无(个人主页)
      if (item.type == 1) {
        this.$refs.ChatInput.appendAtuser('member', item.userId, item.userName)
      } else if (item.type == 2) {
        this.$refs.ChatInput.appendPrivate('member', item.userId, item.userName)
      } else if (item.type == 3) {
        this.$refs.ChatInput.appendReceipt('member', item.userId, item.userName)
      } else {
        this.$refs.ChatPanel.panelShortcutMenuOff()
      }
    },
    changeRules() {
      this.$refs.ChatMember.chatRulesShow()
    },
    appendAtuser(type, userId, userName) {
      this.$refs.ChatInput.appendAtuser(type, userId, userName)
    },
    appendPrivate(type, userId, userName) {
      this.$refs.ChatInput.appendPrivate(type, userId, userName)
    },
    appendReceipt(type, userId, userName) {
      this.$refs.ChatInput.appendReceipt(type, userId, userName)
    },
    // 获取群信息
    groupInfo(data) {
      this.groupName = data.groupName
      // this.groupType = data.groupType
      this.userCount = data.groupUserCount
      // this.groupUid = data.groupUid
    },
    showEmpty() {
      this.loading.mounted = true
    },
    // getGroupInfo() {
    //   this.$refs.ChatMember.getChatRules()
    // },
    // groupMember(data) {
    //   // console.log('groupMember', data)
    //   this.userCount = data.length
    // }
    // sendMess() {
    //   this.$refs.ChatPanel.handleScrollBottom()
    // }
    moreGroupInfo(data) {
      this.groupName = data.groupName
      this.userRole = data.userRole
      this.isDel = data.isDel
    },
    groupMember(data) {
      this.userCount = data.length
    }
  },
  mounted() {
    this.currentGroupId = this.groupId
  },
  destroyed() {
    this.$socket.emit('leaveGroup', 'group-' + this.currentGroupId)
  }
}
</script>
<style scoped>
.dt-head-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.dt-head-right i {
  display: block;
  margin-left: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.dt-head-right .dt-icon-Member {
  background: url(/skb/img/chat/ic_yqcy28-normal.png) no-repeat center;
}
.dt-head-right .dt-icon-Member:hover {
  background: url(/skb/img/chat/ic_yqcy28-hover.png) no-repeat center;
}

.dt-content-page {
  flex-direction: row;
  background-color: transparent;
}
.dt-content-page.dt-chat-talk {
  margin: 0;
}
.dt-content-page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin-right: -318px;
}
.dt-content-page-aside {
  /* border-left: 1px solid #e1e6f0; */
  display: flex;
  width: 280px;
  padding-left: 318px;

  /* flex-direction: column; */
  background-color: #fff;
  overflow: auto;
  overflow-x: hidden;
}
.dt-chat-notalk {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f2f3f5;
  justify-content: center;
  align-items: center;
}
.dt-chat-notalk img {
  width: 96px;
  height: 96px;
}
</style>
